<!--  -->
<template>
  <div class="flex items-center w-full">
    <button
      v-if="props.showPage"
      class="gl-normal-button-active p-2"
      @click="changePage('preview')"
    >
      <el-icon size="16"><ArrowLeft /></el-icon>
    </button>
    <div
      class="gl-button-groups grid"
      :class="props.showPage ? ' mx-3' : 'w-full'"
      :style="{ 'grid-template-columns': ` repeat(${gridNum}, minmax(0, 1fr))` }"
    >
      <button
        class="gl-normal-button py-2 w-full"
        :class="activeTab == item[valueKey] && 'gl-active-button'"
        @click="changeActive(item[valueKey])"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item[labelKey] }}
      </button>
    </div>
    <button v-if="props.showPage" class="gl-normal-button-active p-2" @click="changePage('next')">
      <el-icon size="16"><ArrowRight /></el-icon>
    </button>
  </div>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
const TimeArray = ref<number[]>([])
const activeTab = ref()
onMounted(() => {
  activeTab.value = props.activeIndex == '' ? props.list[0][props.valueKey] : props.activeIndex
})
interface Props {
  showPage?: boolean
  list: { [key: string]: any }[]
  valueKey?: string
  labelKey?: string
  gridNum?: number
  activeIndex?: string
}
const props = withDefaults(defineProps<Props>(), {
  showPage: false,
  valueKey: 'value',
  labelKey: 'label',
  gridNum: 7,
  activeIndex: ''
})

interface Emits {
  (e: 'change', value: number | string): void
}
const emit = defineEmits<Emits>()

const changeActive = (itm: number | string) => {
  activeTab.value = itm
}
watch(activeTab, (newVal) => {
  emit('change', newVal)
})
const changePage = (dir: 'preview' | 'next') => {
  if (dir == 'preview') {
    // const arr = JSON.parse(JSON.stringify())
    TimeArray.value.splice(TimeArray.value.length - 1, 1)
    TimeArray.value.unshift(TimeArray.value[0] - 1)
  } else {
    TimeArray.value.splice(0, 1)
    TimeArray.value.push(TimeArray.value[TimeArray.value.length - 1] + 1)
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
